no message

1 files changed, 6 insertions, 15 deletions

diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 03fac0be..c3d34806 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -15,6 +15,8 @@ import LineDivider from "@/components/elements/LineDivider";
 import { HeartIcon as HeartIconSolid } from "@heroicons/react/24/solid";
 import { useAuth } from "@/core/utils/auth";
 import { HeartIcon } from "@heroicons/react/24/outline";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
+import ProductSimilar from "@/components/products/ProductSimilar";
 
 export async function getServerSideProps( context ) {
   const { slug } = context.query;
@@ -37,7 +39,6 @@ export default function ProductDetail({ product }) {
   const { slug } = router.query;
   const [selectedVariant, setSelectedVariant] = useState("");
   const [quantity, setQuantity] = useState("1");
-  const [similarProducts, setSimilarProducts] = useState(null);
   const [activeVariant, setActiveVariant] = useState({
     id: product.id,
     code: product.code,
@@ -83,15 +84,6 @@ export default function ProductDetail({ product }) {
   }, [ product ]);
 
   useEffect(() => {
-    setSimilarProducts(null);
-    const getSimilarProducts = async () => {
-      const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getIdFromSlug(slug)}/similar?limit=20`);
-      setSimilarProducts(dataSimilarProducts);
-    }
-    if (slug) getSimilarProducts();
-  }, [slug]);
-
-  useEffect(() => {
     if (selectedVariant != '') {
       let newActiveVariant = product.variants.filter((variant) => {
         return variant.id == selectedVariant;
@@ -281,11 +273,10 @@ export default function ProductDetail({ product }) {
         </div>
 
         <LineDivider />
-
-        <div className="p-4">
-          <h2 className="font-bold mb-4">Kamu Mungkin Juga Suka</h2>
-          <ProductSlider products={similarProducts}/>
-        </div>
+        
+        <LazyLoadComponent>
+          <ProductSimilar productId={getIdFromSlug(slug || '')} />
+        </LazyLoadComponent>
         
         <Footer />
       </Layout>